<template>
  <a-layout id="home-layout">
    <a-layout-header class="header">
      <div class="logo">
        <img :src="logo" object-fit="cover" />
      </div>
      <div class="top-tools">
        <audio
          ref="audio"
          style="display: none;"
          :src="nowMusic"
          controls="controls"
          :loop="true"
        ></audio>
        <div class="player">
          <div
            class="audio-player"
            @mouseenter="control = !control"
            @mouseleave="control = !control"
          >
            <img
              :src="logo1"
              :style="{
                transform: 'rotatez(' + rot + 'deg)',
              }"
              class="poster"
              object-fit="cover"
            />
            <div class="title" v-show="!control">
              <span>我曾这样寂寞生活-1我曾这样寂寞生活</span>
              <span>只想安静坐一会</span>
            </div>
            <i v-show="control" class="designer-icon">&#xe607;</i>
            <i v-show="control && !isPlay" @click="play" class="designer-icon"
              >&#xe60b;</i
            >
            <i v-show="control && isPlay" @click="pause" class="designer-icon"
              >&#xe6d0;</i
            >
            <i v-show="control" class="designer-icon">&#xe603;</i>
          </div>
          <progress
            class="audio-progress"
            :value="audioValue"
            :max="audioMax"
          ></progress>
        </div>
        <a-dropdown :trigger="['click']">
          <i
            class="designer-icon"
            style="cursor: pointer;
                        display: block;
                        font-size: 26px;
                        margin-right: 10px;"
            >&#xe844;</i
          >
          <a-menu slot="overlay">
            <a-menu-item v-for="(item, i) in music" @click="qh(item)" :key="i">
              <a href="javascript:;">{{ item.title }}</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <!--                <div style="margin-left: 20px;" @click="goLogin"><a>登录</a></div>-->
      </div>
      <a-menu
        theme="light"
        mode="horizontal"
        v-model="active"
        :style="{ lineHeight: '60px', height: '100%' }"
        @click="menuClick"
      >
        <template v-for="menu in menus">
          <a-menu-item
            v-if="!menu.meta.hidden"
            @click="go(menu)"
            :key="menu.id"
          >
            {{ menu.meta.title }}
          </a-menu-item>
        </template>
      </a-menu>
    </a-layout-header>
    <router-view />
  </a-layout>
</template>

<script>
import logo from '@/assets/logo.png'
import logo1 from '@/assets/logo1.png'

import a from '@/assets/我曾这样寂寞生活-1.mp3'
import b from '@/assets/home free.mp3'
export default {
  name: 'HomeLayout',
  data() {
    return {
      logo: logo,
      logo1: logo1,
      music: [
        {
          title: '我曾这样寂寞生活',
          sing: a
        },
        {
          title: '朋友',
          sing: b
        }
      ],
      nowMusic: a,
      menus: [],
      active: [0],
      isPlay: false,
      rot: 0, // 旋转
      audioMax: 100,
      audioValue: 0,
      control: false // 音乐播放器控制显示隐藏
    }
  },
  created() {
    this.menus = this.$store.getters.routers
    this.active = this.$store.getters.active
  },

  watch: {
    active(v) {
      this.$store.dispatch('setActive', v)
    },
    '$store.getters.active'(v) {
      this.active = v
    }
  },
  methods: {
    go(menu) {
      this.$router.push({ path: menu.path })
    },
    qh(item) {
      // this.nowMusic = item.sing
      // this.$refs.audio.play()
      this.$refs.audio.src = item.sing
      this.pause()
      this.play()
    },
    goLogin() {
      this.$router.push('/login/index')
    },
    /* 播放音频*/
    play() {
      this.$refs.audio.play()
      this.isPlay = !this.isPlay
      this.timer = setInterval(() => {
        this.rot++
        if (this.rot >= 360) {
          this.rot = 0
        }
        this.audioMax = this.$refs.audio.duration
        this.audioValue = this.$refs.audio.currentTime
        if (this.audioValue >= this.audioMax) {
          /* 切换下一首*/
          this.pause()
        }
      }, 50)
    },
    pause() {
      clearInterval(this.timer)
      this.$refs.audio.pause()
      this.isPlay = !this.isPlay
    },
    /* 菜单点击*/
    menuClick({ key }) {
      let menu
      const getMenu = (array) => {
        array.forEach((v) => {
          if (v.id === key) {
            menu = v
          }
          if (v.children) {
            getMenu(v.children)
          }
        })
      }
      getMenu(this.menus)
      if (this.active[0] !== key) {
        this.$router.push(menu.path)
      }
    }
  }
}
</script>

<style scoped lang="less">
#home-layout {
  height: 100%;
  background: url("~@/assets/background.jpg") center center no-repeat;
  .logo {
    width: 170px;
    margin-right: 45px;
    float: left;
    color: #ffffff;

    img {
      width: 100%;
    }
  }

  .header {
    background-color: #ffffff;
    /*margin-bottom: 10px;*/
    padding: 0px 50px 0px 38px;
  }

  .top-tools {
    float: right;
    height: 63px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .player {
      position: relative;
      margin-right: 10px;
      width: 200px;
      height: 60px;

      & progress {
        -webkit-appearance: none;
      }

      & ::-webkit-progress-inner-element {
      }

      & ::-webkit-progress-bar {
        /*border: 1px solid red; */
        border: unset;
      }

      & ::-webkit-progress-value {
        background: red;
      }

      & ::-moz-progress-bar {
        background: #34538b;
      }

      & ::-ms-fill {
        background: #34538b;
      }

      .audio-progress {
        position: absolute;
        bottom: 4px;
        left: 50px;
        width: 150px;
        height: 3px;
      }

      .audio-player {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .poster {
          display: block;
          width: 50px;
          height: 50px;
          margin-right: 10px;
          border: 1px solid #999999;
          border-radius: 50%;
        }

        .title {
          margin-right: 10px;

          span {
            display: block;
            overflow: hidden;
            height: 20px;
            line-height: 20px;
          }

          span:first-child {
            font-size: 14px;
          }

          span:last-child {
            font-size: 10px;
          }
        }

        i {
          cursor: pointer;
          display: block;
          font-size: 26px;
          margin-right: 22px;
        }
      }
    }
  }
}
</style>
